import React, { useState, useRef, useEffect } from 'react';
import request from 'umi-request';
import { history } from 'umi';

import { ProTable, TableDropdown } from '@ant-design/pro-table';
import { Menu, Space, Tag, Card, Table, Select, message, Button } from 'antd';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import moment from 'moment';
import CardBreadcrumb from '@/components/CardBreadcrumb';
import { getCustomertSubmit } from '@/services/customerAccess';

import style from './index.less';

interface IProps {
  props: any;
}

type GithubIssueItem = {
  url: string;
  id: number;
  number: number;
  title: string;
  labels: {
    name: string;
    color: string;
  }[];
  state: string;
  comments: number;
  created_at: string;
  updated_at: string;
  closed_at?: string;
  kehuhao?: number;
  chinaName: string;
  englishName: string;
  customerStatus: any;
  shnehe: string;
  qudaoStatus: string;
  tel: string;
  hezuofnag: string;
  updataTime: string;
  updataPeople: string;
  createTime: string;
  createPeople: string;
};

const columns1: ProColumns<GithubIssueItem>[] = [
  // {
  //   dataIndex: 'index',
  //   valueType: 'indexBorder',
  //   width: 48,
  // },
  {
    title: '功能',
    dataIndex: 'caozuo ',
    hideInSearch: true,
    render: (text, record) => (
      <Button
        type="link"
        onClick={() => {
          history.push(`/customer-access/newcustomers?id=${record.id}`);
        }}
      >
        详情
      </Button>
    ),
  },
  {
    title: '客户号',
    dataIndex: 'kehuhao',
    hideInSearch: true,
  },
  {
    title: '客户中文名称',
    dataIndex: 'chinaName',
    hideInSearch: true,
  },
  {
    title: '客户英文名称',
    dataIndex: 'englishName',
    hideInSearch: true,
  },
  {
    title: '客户状态',
    dataIndex: 'customerStatus',
    hideInSearch: true,
  },
  {
    title: '审核流程',
    dataIndex: 'shnehe',
    hideInSearch: true,
  },
  {
    title: '渠道进件状态',
    dataIndex: 'qudaoStatus',
    hideInSearch: true,
  },
  {
    title: '联系电话',
    dataIndex: 'tel',
    hideInSearch: true,
  },
  {
    title: '归属合作方',
    dataIndex: 'hezuofnag',
    hideInSearch: true,
  },
  {
    title: '更新时间',
    dataIndex: 'updataTime',
    hideInSearch: true,
  },
  {
    title: '更新人',
    dataIndex: 'updataPeople',
    hideInSearch: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    hideInSearch: true,
  },
  {
    title: '创建人',
    dataIndex: 'createPeople',
    hideInSearch: true,
  },
];

const CustomeSubmit: React.FC = (props) => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  // 表格模拟数据
  const [tableData, setTableData] = useState([]);
  const [selectOpen, setSelectOpen] = useState(false);

  const actionRef = useRef<ActionType>();
  const selectRef = useRef();
  const dataTime1 = moment().format('YYYY-MM-DD ');

  const data1: any = [
    {
      key: 1,
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: 2,
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: 3,
      name: 'Joe Black',
      age: 322,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];
  const data2: any = [
    {
      key: 11,
      name: '1212',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: 21,
      name: '12n',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: 31,
      name: '12 Black',
      age: 1,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];
  // 表格格式
  const columnsform = [
    {
      title: '客户号',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '中文名称',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '英文名称',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '客户类型',
      key: 'tags',
      dataIndex: 'tags',
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
  ];

  const searchFormColumns = [
    {
      title: '日期区间',
      key: 'dateRange',
      dataIndex: 'createdAtRange',
      valueType: 'dateRange',
      hideInTable: true,
      initialValue: [dataTime1, dataTime1],
    },
    {
      title: '上级机构',
      key: 'shangjihezuojigou',
      dataIndex: 'shangjihezuojigou',
      hideInTable: true,
      fieldProps: {
        showSearch: true,
      },
      renderFormItem: (_, { defaultRender, fieldProps, ...rest }, from) => {
        return (
          <Select
            ref={selectRef}
            {...fieldProps}
            key="shangjihezuojigouSelect"
            onSearch={(value) => {
              if (value == 1) {
                setTableData(data1);
              } else if (value == 11) {
                setTableData(data2);
              } else {
                setTableData([]);
              }
            }}
            dropdownMatchSelectWidth={false}
            dropdownClassName={style.selectdropdownplatform}
            dropdownRender={() => (
              <Table
                style={{ padding: '10px' }}
                columns={columnsform}
                rowKey={(columns) => {
                  columns.key;
                }}
                onRow={(record) => {
                  return {
                    onClick: (event) => {
                      from.setFieldsValue({
                        shangjihezuojigou: record.key,
                      });
                      selectRef?.current?.blur();
                    }, // 点击行
                  };
                }}
                dataSource={tableData}
              />
            )}
          />
        );
      },
    },
    {
      title: '归属合作方',
      dataIndex: 'guishu',
      hideInTable: true,
      fieldProps: {
        showSearch: true,
      },
      renderFormItem: (_, { defaultRender, fieldProps, ...rest }, from) => {
        return (
          <Select
            ref={selectRef}
            {...fieldProps}
            {...rest}
            key="guishuselect"
            onSearch={(value) => {
              if (value == 1) {
                setTableData(data1);
              } else if (value == 11) {
                setTableData(data2);
              } else {
                setTableData([]);
              }
            }}
            dropdownMatchSelectWidth={false}
            dropdownClassName={style.selectdropdownplatform}
            dropdownRender={() => (
              <Table
                style={{ padding: '10px' }}
                columns={columnsform}
                rowKey={(columns) => columns.key}
                onRow={(record) => {
                  return {
                    onClick: (event) => {
                      from.setFieldsValue({
                        guishu: record.key,
                      });
                      selectRef?.current?.blur();
                    }, // 点击行
                  };
                }}
                dataSource={tableData}
              />
            )}
          />
        );
      },
    },
    {
      title: '集团客户号',
      key: 'jituan',
      hideInTable: true,
      dataIndex: 'jituan',
      fieldProps: {
        showSearch: true,
      },
      renderFormItem: (_, { defaultRender, fieldProps, ...rest }, from) => {
        return (
          <Select
            ref={selectRef}
            {...fieldProps}
            {...rest}
            key="jituanSelect"
            onSearch={(value) => {
              if (value == 1) {
                setTableData(data1);
              } else if (value == 11) {
                setTableData(data2);
              } else {
                setTableData([]);
              }
            }}
            dropdownMatchSelectWidth={false}
            dropdownClassName={style.selectdropdownplatform}
            dropdownRender={() => (
              <Table
                columns={columnsform}
                style={{ padding: '10px' }}
                rowKey={(columns) => columns.key}
                onRow={(record) => {
                  return {
                    onClick: (event) => {
                      from.setFieldsValue({
                        jituan: record.key,
                      });
                      selectRef?.current?.blur();
                    }, // 点击行
                  };
                }}
                dataSource={tableData}
              />
            )}
          />
        );
      },
    },
    {
      title: '客户号',
      key: 'accesscode',
      hideInTable: true,
      dataIndex: 'accesscode',
      fieldProps: {
        showSearch: true,
      },
      renderFormItem: (_, { defaultRender, fieldProps, ...rest }, from) => {
        return (
          <Select
            ref={selectRef}
            {...fieldProps}
            {...rest}
            key="accesscodeSelect"
            onSearch={(value) => {
              if (value == 1) {
                setTableData(data1);
              } else if (value == 11) {
                setTableData(data2);
              } else {
                setTableData([]);
              }
            }}
            dropdownMatchSelectWidth={false}
            dropdownClassName={style.selectdropdownplatform}
            dropdownRender={() => (
              <Table
                style={{ padding: '10px' }}
                columns={columnsform}
                rowKey={(columns) => columns.key}
                onRow={(record) => {
                  return {
                    onClick: (event) => {
                      from.setFieldsValue({
                        accesscode: record.key,
                      });
                      selectRef?.current?.blur();
                    }, // 点击行
                  };
                }}
                dataSource={tableData}
              />
            )}
          />
        );
      },
    },
  ];

  // 卡片面包屑
  const getBreadcrumbNavigation = () => {
    return <CardBreadcrumb props={props} />;
  };

  return (
    <Card
      className={style.cardStyle}
      title={getBreadcrumbNavigation()}
      extra={
        <Button
          type="link"
          onClick={() => {
            history.push(`/customer-access/newcustomers?id=${'id'}`);
          }}
        >
          补录
        </Button>
      }
      style={{ width: '100%' }}
    >
      <ProTable
        style={{ height: '100%' }}
        scroll={{ x: 1000 }}
        rowkey="accesstable"
        columns={[...columns1, ...searchFormColumns]}
        actionRef={actionRef}
        cardBordered
        rowSelection={{
          defaultSelectedRowKeys: [],
        }}
        form={{ labelWrap: true }}
        request={async (params: any = {}, sort: any, filter: any) => {
          // const { dateRange } = params;

          // const data1 = dateRange[0];
          // const data2 = dateRange[1];

          // var diff = moment(data2).diff(data1, 'days');
          // if (diff && diff > 7) {
          //   message.warn('查询日期不能超过7天');
          //   return;
          // }

          const { data: response } = await getCustomertSubmit(params);

          return {
            data: response,
          };
        }}
        search={{
          labelWidth: 90,
          // labelWidth: 'auto',
        }}
        options={false} // 控制table设置按钮开关
        pagination={{
          //showQuickJumper: true, //显示是否跳转的弹窗
          // total: 1000,        //显示数据的总条数
          // pageSizeOptions: [10, 20, 50, 100], // 自定义显示页码切换的10/20/50
          showSizeChanger: true, // 显示页码切换的10/20/50
        }}
        editable={{
          type: 'multiple',
        }}
        defaultSize="small"
        tableAlertRender={({
          selectedRowKeys,
          selectedRows,
          onCleanSelected,
        }) => (
          <Space size={24}>
            <span>
              已选 {selectedRowKeys.length} 项
              <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
                取消选择
              </a>
            </span>
          </Space>
        )}
        // toolBarRender={() => [
        //   <Button key="button" type="primary" onClick={() => {}}>
        //     新增
        //     {/* {t("buttons.Add")} */}
        //   </Button>,
        //   <Button key="button" type="primary">
        //     导出
        //     {/* {t("buttons.Export")} */}
        //   </Button>,
        // ]}
      />
    </Card>
  );
};
export default CustomeSubmit;
